/**
1. 本页面为融资详情界面
  1 financeConfirm 融资确认界面
  2 financeEvaluate 融资确认界面
  3 finance 融资详情界面（本界面）


 */
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Icon, Image } from '@tarojs/components'

import checkOnImg from '../../../images/other/checkOn.png'
import checkOffImg from '../../../images/other/checkOff.png'

import './financeConfirm.scss'

export default class FinanceConfirm extends Component {

  config = {
    navigationBarTitleText: '融资详情'
  }

  state={
    data:{
      flowStatus : 4,
      customerName : "金厦建设集团有限公司",
      finAmount : 500000,
      orgCode : "320582000076416",
      loanTerm : "6-5.66个月",
      guaranteeMode : "信保",
      loanRateLower : 4.35,
      loanRateUpper : 5.66,
      inst : "农业银行",
      purpose : "",
      remark : "",
      instRecords : [{
            instName : "农业银行",
            handleTime : "2020-01-13",
            demandStatus : "申请成功",
            flowStatus : "等待额度确认",
            rejectReason : ""
      }],
      creditRecords : [
        {
          creditNum: "201912120049",
          creditName:"开关制造有限公司",
          creditAmount: 10000,
          creditBeginDate: "2020-01-13",
          creditEndDate: "2020-01-14"
        }
      ]
    },
    check:false
  }

  imgAs=[null,
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a1.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a2.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a3.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a4.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a5.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/a6.png"]
  imgBs=[null,
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b1.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b2.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b3.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b4.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b5.png",
    "https://gitee.com/zhangruiyuan/loudi-weapp-poc-img/raw/master/images/stage/b6.png"]
  componentWillMount () {
    let {nid}= this.$router.params 
    Taro.request({
      url:"http://101.37.65.67/loudi-poc/demand/"+nid,
      method:"GET",
      success:(res)=>{
        console.log(res.data.data)
        if(res.data.data.creditRecords){
          Taro.redirectTo({
            url:"/pages/finance/financeEvaluate/financeEvaluate?nid="+nid
          })
        }else{
          this.setState({
            data:res.data.data
          })
        }
        
      }
    })   
  }

  handleBtnFinanceConfirm(){
    let {check}=this.state;
    if(!check){
      Taro.showToast({
        title: '请阅读并签署协议',
        icon: 'none',
        duration: 1000
      });
      return;
    }
    let {nid}= this.$router.params 
    Taro.request({
      url:"http://101.37.65.67/loudi-poc/demand/"+nid+"/credit"
    }).then(e=>{
      Taro.redirectTo({url:'/pages/finance/financeEvaluate/financeEvaluate?nid='+nid})
    })
  }

  to3splitAmount(financingAmount){
    financingAmount=financingAmount.toString();
    let str="";
    for(let i=0;i<financingAmount.length;i++){
      str=financingAmount[financingAmount.length-i-1]+str;
      if(i%3===2){str=','+str;}
    }
    if(str[0]===','){str=str.substr(1)};
    if(str==='')str='0'
    financingAmount='￥'+str;
    return financingAmount
  }

  handleChecked(e){
    let {check} = this.state;
    check=!check;
    this.setState({
      check
    })
  }

  render () {
    return (
      <View className='finance'>
        <Image className='stage_img'src={this.state.data.instRecords[0].demandStatus==='申请失败'?this.imgBs[this.state.data.flowStatus]:this.imgAs[this.state.data.flowStatus]}>
        </Image>
        <View className='finance_info'>
          <View className='title'>融资信息</View>
          <View className='finance_info_item company_name'>
            <View className='key'>企业名称</View>
            <View className='value'>{this.state.data.customerName}<View className='right'/></View>
          </View>
          <View className='finance_info_item institution_code'>
            <View className='key'>组织机构代码</View>
            <View className='value'>{this.state.data.orgCode}<View className='right'/></View>
          </View>
          <View className='finance_info_item finance_price'>
            <View className='key'>融资金额（万元）</View>
            <View className='value'>{this.to3splitAmount(this.state.data.finAmount)}<View className='right'/></View>
          </View>
          <View className='finance_info_item rate_range'>
            <View className='key'>利率范围</View>
            <View className='value'>{this.state.data.loanRateLower}% - {this.state.data.loanRateUpper}%<View className='right'/></View>
          </View>
          <View className='finance_info_item finance_time'>
            <View className='key'>融资期限（月）</View>
            <View className='value'>{this.state.data.loanTerm} <View className='right more'/></View>
          </View>
          <View className='finance_info_item guarrantee_mode'>
            <View className='key'>担保方式</View>
            <View className='value'>{this.state.data.guaranteeMode}<View className='right'/></View>
          </View>
          <View className='finance_info_item finance_purpose'>
            <View className='key'>融资用途</View>
            <View className='value'>{this.state.data.purpose}<View className='right more'/></View>
          </View>
          <View className='finance_info_item institutions'>
            <View className='key'>指定金融机构</View>
            <View className='value'>{this.state.data.inst}<View className='right more'/></View>
          </View>
          <View className='finance_info_item remark'>
            <View className='key'>备注</View>
            <View className='value'>{this.state.data.remark}<View className='right more'/></View>
          </View>
        </View>
        <View className='finance_institution'>
          <View className='title'>金融机构需求记录</View>
          <View className='finance_institution_item insititution_name'>
            <View className='key'>机构名称</View>
            <View className='value'>{this.state.data.instRecords[0].instName}<View className='right'/></View>
          </View>
          <View className='finance_institution_item handle_time'>
            <View className='key'>处理时间</View>
            <View className='value'>{this.state.data.instRecords[0].handleTime}<View className='right'/></View>
          </View>
          <View className='finance_institution_item need_status'>
            <View className='key'>对接需求状态</View>
            <View className='value'>{this.state.data.instRecords[0].demandStatus}<View className='right'/></View>
          </View>
          <View className='finance_institution_item procedure_status'>
            <View className='key'>对接流程状态</View>
            <View className='value'>{this.state.data.instRecords[0].flowStatus}<View className='right'/></View>
          </View>
          <View className='finance_institution_item fail_reason'>
            <View className='key'>不通过原因</View>
            <View className='value'>{this.state.data.instRecords[0].rejectReason}<View className='right more'/></View>
          </View>
        </View>
        
          {/* this.state.data.instRecords.demandStatus==='申请失败'?'': */}
        <View className={this.state.data.instRecords[0].demandStatus==='申请失败'?'noneDiplay':'read_confirm'}>
          <Image className='check' mode='widthFix' src={this.state.check?checkOnImg:checkOffImg} onClick={this.handleChecked}></Image>
          已阅读并同意签署
          <View className='confirm_agreement'>《银行贷款合同》</View>
        </View>
        <View className={this.state.data.instRecords[0].demandStatus==='申请失败'?'noneDiplay':'financeConfirm_btn'}onClick={this.handleBtnFinanceConfirm}>融资确认</View>
     </View>
    ) 
  }
}
